<template>
    <div>
           <comcart>
      <div slot="body_name">
          <el-alert
    title="注意:只允许为三级分类设置参数"
    type="warning"
    show-icon>
  </el-alert>
  <el-row>
      <el-col>
       <el-row style="margin-top:20px;">
        <label>请选择分类:</label>
             <el-cascader
                v-model="selectkeys"
                :options="typelist"
                :props="{ expandTrigger: 'hover',label:'cat_name',value:'cat_id' }"
                @change="handleChange"
                size="small"
                ></el-cascader>
      </el-row>
      </el-col>

    </el-row>
        <el-col>
          
        
 <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="动态参数" name="many">
         <el-table :data="dataSouce" border class="tabletop" style="width: 100%">
        <el-table-column type="expand"></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
         <el-table-column label="参数名称" prop="attr_name"></el-table-column>
         <el-table-column label="操作">
          <template slot="header">
            <el-button type="primary" size="mini" @click="dialogFormVisible=true">添加</el-button>
          </template>
          <el-table-column fixed="right" label="操作" width="320px">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="goeait(scope.row)" >编辑</el-button>
               <el-button  type="danger"  size="mini"  icon="el-icon-delete"  @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table-column>
         </el-table>
          </el-tab-pane>
           <el-tab-pane label="静态属性" name="only">
         <el-table :data="onlyData" border  style="width: 100%">
        <el-table-column type="expand"></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
         <el-table-column label="参数名称" prop="attr_name"></el-table-column>
         <el-table-column label="操作">
          <template slot="header">
            <el-button type="primary" size="mini" @click="gosave()">添加</el-button>
          </template>
          <el-table-column fixed="right" label="操作" width="320">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="goeait(scope.row)"
              >编辑</el-button>
              <el-button 
              type="danger" 
              size="mini" 
              icon="el-icon-delete" 
              @click="del(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table-column>
         </el-table>
    </el-tab-pane>
  </el-tabs>
  
     <el-dialog title="添加分类参数" :visible.sync="dialogFormVisible">
          <el-form :model="add">
            <el-form-item label="参数名称" label-width="100px">
              <el-input v-model="add.attr_name"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
          </div>
        </el-dialog>
 

 <el-dialog title="修改分类参数" :visible.sync="isshow">
          <el-form :model="updte">
            <el-form-item label="参数名称" label-width="100px">
              <el-input v-model="updte.attr_name"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isshow = false">取 消</el-button>
            <el-button type="primary" @click="updata()">确 定</el-button>
          </div>
        </el-dialog>

        </el-col>
    </el-row>

  </el-row>
      </div>
           </comcart>
    </div>
</template>

<script>
import comcart from "../../components/comcart/index.vue";
export default {
  components: {
    comcart,
  },
  data() {
    return {
      isshow:false,
      dialogFormVisible: false,
      selectkeys: 0,
      typelist: [],
      activeName: "many",
      dataSouce: [],
      onlyData: [],

      searchObj: {
        id: 0,
        attr_id: "", //分类参数 ID
        attr_name: "", //分类参数名称
        cat_id: "", //分类参数所属分类
        attr_sel: "", //only:输入框(唯一) many:后台下拉列表/前台单选
        attr_write: "", //manual:手工录入 list:从列表选择
        attr_vals: "", //如果 attr_write:list,那么有值，该值以逗号分隔
      },
      
      add: {
        attr_name: "",
        attr_sel: "",
        attr_vals: "", //初始化参数类型的值为true
      },

      updte:{
        id:0,
        attrId:0,
        attr_name: "",
        attr_sel: "",
        attr_vals: "", //初始化参数类型的值为true
      }
    };
  },
  methods: {
    //渲染下拉级联窗
    async query() {
      let rst = await this.$http.get(`categories/${this.searchObj.attr_id}`);
      console.log(rst);
      this.typelist = rst.data;
    },
    //动态静态数据渲染
    async queryall() {
      let id = this.selectkeys[this.selectkeys.length - 1];
      let rst = await this.$http.get(`categories/${id}}/attributes`, {
        sel: this.activeName,
      });

      console.log(rst);
      if (this.activeName == "many") {
        this.dataSouce = rst.data;
      } else this.onlyData = rst.data;
    },
    //动态添加分类
    async save() {
      //商品添加
      // let rst=await this.$http.post("categories",this.add)
      // console.log(this.add.cat_name);
      // console.log(rst);
      // this.dialogFormVisible=false
      // this.queryall()
      this.add.attr_sel = this.activeName;
      let rst = await this.$http.post(
        `categories/${this.selectkeys[this.selectkeys.length-1]}/attributes`,
        this.add
      );
      console.log(rst);
      this.dialogFormVisible = false;
      this.queryall();
      this.add.attr_name=""
    },
    //静态添加
   async gosave(){
       this.dialogFormVisible=true,
      this.queryall();
    },
    //删除单行数据
     
       
  del(row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
         console.log(row);
             let rst =await this.$http.delete(`categories/${row.cat_id}/attributes/${row.attr_id}`)
             if(rst.meta.status==200){
                 this.$message.success("删除成功");
                   this.queryall(); //刷新参数列表
             }else{
                 this.$message.error("删除失败");
             }
        }).catch(() => {
          this.$message.info("已取消删除")        
        });},

    //切换动态静态时触发的函数
    handleClick(tab, event) {
      console.log(tab, event);
      this.queryall();
    },
    //级联下拉窗值改变
    handleChange(value) {
      this.queryall();
      console.log(value);
    },
    //值回填
   goeait(row){
    this.isshow=true
    console.log(row);
    this.updte=JSON.parse(JSON.stringify(row))
    // let{attr_name,attr_id,cat_id}=row
    // this.updte.attr_name=attr_name
    // this.updte.attr_id=attr_id
    // this.updte.cat_id=cat_id
    },
    //分类参数修改
   async updata(){
     console.log(this.updte.id);
     let rst=await this.$http.put(`categories/${this.updte.cat_id}/attributes/${this.updte.attr_id}`,{
       attr_sel:this.updte.attr_sel,attr_name:this.updte.attr_name
     })
     console.log(rst);
     this.isshow=false
     this.queryall()
    }
  },
  
  mounted() {
    this.query();
  },
};
</script>

<style lang="less" scoped>
</style>